ホーム > Laravel > 【laravel】intervention-imageで画像を圧縮したり、加工して保存する方法
Laravel

【laravel】intervention-imageで画像を圧縮したり、加工して保存する方法

いつもご利用ありがとうございます。
この記事には広告が掲載されており、その広告費によって運営しています。

【laravel】intervention-image で画像を圧縮したり、加工して保存する方法についてまとめました。

環境

Laravel と PHP のバージョン

php v7.4.1
Laravel Framework 6.16.0

composer.json

"intervention/image": "^2.5"

インストールする方法

こちらのドキュメントに書いてあります

コマンドで

$ composer require intervention/image

をしてインストールします。

config/app.php を編集する

~~~~~~
'providers' =>[
~~~~~~
Intervention\Image\ImageServiceProvider::class
~~~~~~
]

~~~~~~
'aliases' => [
~~~~~~
'Image' => Intervention\Image\Facades\Image::class
~~~~~~
]

上記を追記します。

下記のコマンドをして、ファイルを追加する

$ php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravelRecent"

このコマンドで config/image.php ができます。

driver を gd に指定するという処理が書いてあります。

gd とは、 Laravel に入っている画像処理のためのライブラリです。

実装方法

これ以降は全てコントローラの記述です。

use Image;

まず宣言します。

その後は、

今回の例では、

/storage/app/public/pop/pop1.png

にファイルがあるという前提になります。

$path = storage_path('app/public/pop/pop1.png');
$img = Image::make($path);

これで画像データを定義します(ファイルの指定は階層など間違えやすくややこしいです)

この

$img

をレスポンスで返せば画像が表示できます。

S3 の画像データを使う

S3 に限らず、公開されている画像には画像の URL を指定すれば使えると思います。

$img = Image::make('ここに画像のURL');
$img->resize(430, 430);
$img->encode('png');
$img->save('保存するパス');

画像と画像を重ねる方法

こんな感じで insert するだけです。

$img->insert($img2, 'top-left', 0, 30);

左上から横 0px、縦 30px の場所に挿入することができます。

テキストを挿入したり、透過させたりできます。

画像の保存する方法

まず、Laravel のストレージに保存する

$filePath = storage_path('app/temp');
$img->encode('jpg')->save($filePath);

上記は一時フォルダに保存していますが、Laravel の機能で保存できます。

Laravel のストレージから S3 に保存する

$disk = Storage::disk('s3');
$uploadPath = 'upload';
$disk->put($uploadPath, file_get_contents($filePath), 'public');

このような感じで file_get_contents()を使って一時フォルダから S3 に保存しています。

一時ファイルの削除

普通に削除

Storage::disk('local')->delete($filePath);

特殊な例

これはダウンロード機能の場合

return response()->download($file, 'ファイル名.jpg', $headers)->deleteFileAfterSend(true);

deleteFileAfterSend(true)メソッドを使うと一時ファイルを消してくれます。便利。

以上です。

便利なライブラリなので記述自体は少なく、色んなことができます。

ファイルのパス指定が結構大変ですが、エラー文をよく読んでチャレンジしてみてください。

まとめ

以上です。

Intervention-Image を使って、画像を加工してみました。

Resize や webp を使えば、大きすぎる画像のサイズを小さくすることが可能なので、おすすめです。

それでは!

Web エンジニアの転職なら【転職ドラフト】